<script setup>
import GLOBE from 'vanta/dist/vanta.globe.min.js'
import "https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"
import {onBeforeUnmount, onMounted, ref} from "vue";

// 保存背景效果
let vantaEffect = null
// 需要添加背景的元素
const vantaRef = ref(null)
onMounted(() => {
  // 背景效果
  vantaEffect = GLOBE({
    el: vantaRef.value,
    THREE: THREE
  })
  // 背景配置
  VANTA.GLOBE({
    el: vantaRef.value,
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    scale: 1.00,
    scaleMobile: 1.00
  })
})
onBeforeUnmount(() => {
  // 背景效果销毁
  vantaEffect.destroy()
})
</script>

<template>
    <div class="bird-bg fixed top-0 left-0 -z-10 w-screen h-screen" ref="vantaRef"></div>
</template>

<style scoped>

</style>